<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
// import echarts from 'echarts' //全局引入 无需引入主题 和其他组件
// require('echarts/theme/macarons') // echarts 主题

// 主题
// require('./purple-passion') //切换主题  主题可以在 https://echarts.apache.org/zh/download-theme.html 中定制
// this.chart = echarts.init(this.$el, 'purple-passion') //使用

// require('echarts/lib/component/title');
// require('echarts/lib/component/tooltip'); //提示框
// require('echarts/lib/component/legend');  //标题组件
// require('echarts/lib/chart/pie');

import echarts from 'echarts/lib/echarts'
import 'echarts/theme/macarons.js'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    title: {
      type: String,
      default: ''
    },
    legendLeft: {
      type: String,
      default: 'center'
    },
    legendBottom: {
      type: String,
      default: '10px'
    },
    legendData: {
      type: Array,
      default: () => {
        return ['Industries', 'Technology', 'Forex', 'Gold']
      }
    },
    seriesData: {
      type: Object,
      default: () => {
        return {
          name: '-- --',
          data: [
            { value: 320, name: 'Industries' },
            { value: 240, name: 'Technology' },
            { value: 149, name: 'Forex' },
            { value: 100, name: 'Gold' }
          ]
        }
      }
    }

  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    // seriesData 是数据 监听数据变化的时候 触发setOptions  修改数据
    seriesData(val) {
      this.$nextTick(() => {
        this.setOptions()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons') // 初始化
      this.setOptions()
    },
    // 配置属性
    setOptions() {
      const { title, legendLeft, legendBottom, legendData, seriesData } = this
      this.chart.setOption({
        title: {
          text: title
        },
        tooltip: { // 提示框浮层内容格式器
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: legendLeft,
          bottom: legendBottom,
          data: legendData
        },
        series: [
          {
            name: seriesData.name,
            type: 'pie',
            roseType: 'radius',
            // radius: [15, 195],
            radius: '60%',
            center: ['50%', '45%'],
            data: seriesData.data,
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>
